Skip to main content

Edit

Detailed Description​

Edit allows the user to enter and edit a single line of plain text with a useful collection of editing functions, including undo and redo, cut and paste, and drag and drop.
By changing the password property of the edit, it can also be used as a "write-only" field, for inputs such as passwords.

FormatEdit​

The FormatEdit is an edit widget that includes a validator. It allows the text to be constrained basing on the rules defined by the validator.

Event​

The edit has text change and text finish events.
A text change event is emitted whenever there is a change in the text.
A text finish event is emitted when the Enter key is pressed, or if the edit loses focus and its content has changed since the last time this event was emitted.

// Listen for the text change event
edit.bind('textChanged', (event: TextChangeEvent): void => {
    event.text; // The current text of the edit.
});
// Listen for the text finish event
edit.bind('textFinished', (event: TextFinishEvent): void => {
    event.text; // The current text of the edit.
});

Example code​

In the code below, you will create edits:

const desktop = Desktop.instance();
const layout = new FlexLayout(desktop, Orientation.Vertical);
layout.spacing = 6;
const edit = new Edit(layout);
edit.placeholder = 'please input';
const edit2 = new Edit(layout);
edit2.text = '123';
const edit3 = new Edit(layout);
edit3.alignment = Alignment.Right;
edit3.text = 'abc';

If you want to set an edit to password mode, you can modify the password property. This way, when you input content, dots or asterisks will be displayed instead of the actual characters, protecting your privacy.

const desktop = Desktop.instance();
const edit = new Edit(desktop);
edit.text = '123456';
edit.password = true;

You also can create a format Edit with a validator. In this way, you can only input integers.

const desktop = Desktop.instance();
const formatEdit = new FormatEdit(desktop);
formatEdit.validator = new IntegerValidator;